<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
	body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
	</style>
	<!-- 百度地图api -->
	<script type="text/javascript" src="http://ff.kis.v2.scr.kaspersky-labs.com/79197A6D-C01D-DE44-8C92-227B2827362C/main.js" charset="UTF-8"></script>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=Q4MPiEDZc7UcG18QEUAqnqf48MyWWdED"></script>
	<script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
	<link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />
	<!--  -->
	<script src="${ctxStatic}/jquery/jquery-1.8.3.min.js" type="text/javascript"></script>
	<link href="${ctxStatic}/bootstrap/2.3.1/css_${not empty cookie.theme.value ? cookie.theme.value : 'cerulean'}/bootstrap.min.css" type="text/css" rel="stylesheet" />
	<script src="${ctxStatic}/bootstrap/2.3.1/js/bootstrap.min.js" type="text/javascript"></script>
	<link href="${ctxStatic}/bootstrap/2.3.1/awesome/font-awesome.min.css" type="text/css" rel="stylesheet" />
	<!--[if lte IE 7]><link href="${ctxStatic}/bootstrap/2.3.1/awesome/font-awesome-ie7.min.css" type="text/css" rel="stylesheet" /><![endif]-->
	<!--[if lte IE 6]><link href="${ctxStatic}/bootstrap/bsie/css/bootstrap-ie6.min.css" type="text/css" rel="stylesheet" />
	<script src="${ctxStatic}/bootstrap/bsie/js/bootstrap-ie.min.js" type="text/javascript"></script><![endif]-->
	<link href="${ctxStatic}/jquery-select2/3.4/select2.min.css" rel="stylesheet" />
	<script src="${ctxStatic}/jquery-select2/3.4/select2.min.js" type="text/javascript"></script>
	<link href="${ctxStatic}/jquery-validation/1.11.0/jquery.validate.min.css" type="text/css" rel="stylesheet" />
	<script src="${ctxStatic}/jquery-validation/1.11.0/jquery.validate.min.js" type="text/javascript"></script>
	<link href="${ctxStatic}/jquery-jbox/2.3/Skins/Bootstrap/jbox.min.css" rel="stylesheet" />
	<script src="${ctxStatic}/jquery-jbox/2.3/jquery.jBox-2.3.min.js" type="text/javascript"></script>
	<script src="${ctxStatic}/My97DatePicker/WdatePicker.js" type="text/javascript"></script>
	<script src="${ctxStatic}/common/mustache.min.js" type="text/javascript"></script>
	<link href="${ctxStatic}/common/jeesite.css" type="text/css" rel="stylesheet" />
	<script src="${ctxStatic}/common/jeesite.js" type="text/javascript"></script>
	<script type="text/javascript">var ctx = '${ctx}', ctxStatic='${ctxStatic}';</script>
	<title>草原带管理管理</title>
</head>
<body>
<ul class="nav nav-tabs">
		<li class="active"><a href="">草原带管理列表</a></li>		
	</ul>
	<form:form id="searchForm" modelAttribute="userInfo" action="${ctx}/userinfo/userInfo/" method="post" class="breadcrumb form-search">
		<ul class="ul-form">
			<li><label>名称：</label>
				<form:input path="username" htmlEscape="false" maxlength="60" class="input-medium"/>
			</li>
			<li><label>地区：</label>
				<sys:treeselect id="area" name="area.id" value="${userInfo.area.id}" labelName="area.name" labelValue="${userInfo.area.name}"
					title="区域" url="/sys/area/treeData" cssClass="input-small" allowClear="true" notAllowSelectParent="true"/>	
			</li>
			<li class="btns"><input id="btnSubmit" class="btn btn-primary" type="submit" value="查询"/></li>
			<li class="clearfix"></li>
		</ul>
	</form:form>
	<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
	// 百度地图API功能 111.147241,41.812983

	
	
	var map = new BMap.Map("allmap");    // 创建Map实例
	map.centerAndZoom(new BMap.Point(111.147241, 41.812983), 6);  // 初始化地图,设置中心点坐标和地图级别
	//添加地图类型控件
	map.addControl(new BMap.MapTypeControl({
		mapTypes:[
            BMAP_NORMAL_MAP,
            BMAP_HYBRID_MAP
        ]}));	  
	map.setCurrentCity("呼和浩特");          // 设置地图显示的城市 此项是必须设置的
	map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
	

	$(document).ready(function(){
		
		listUserInfo();
	});
	//查询所有点
	function listUserInfo()
	{
		var jsondata;
         $.getJSON('${ctx}/userinfo/userInfo/userMapData', function (data) {
             $.each(data, function (entryindex, entry) {       
           			var point = new BMap.Point(entry["lon"], entry["lat"]);
     				addMarker(entry["id"],entry,point);
              });

        }); 
	
	}
	//增加内容
	function addMarker(id,entry,point)
	{
		//var myIcon = new BMap.Icon("http://lbsyun.baidu.com/jsdemo/img/fox.gif", new BMap.Size(300,157));
		//var marker = new BMap.Marker(point,{icon:myIcon});
		var marker = new BMap.Marker(point);
		var label = new BMap.Label(entry["username"],{offset:new BMap.Size(20,-10)});
		label.setTitle(id);
		label.setStyle({ border : "0", fontSize : "12px" });
		marker.setLabel(label);
		map.addOverlay(marker);
 		marker.addEventListener("click", function() {
 			showDetail(marker,entry)
 			
		}); 
	}
	//编辑点
	function showDetail(marker,data)
	{
		var grassStr='',stockStr='';
		if(typeof data.grassList!="undefined")
		{
	        $.each(data.grassList, function (entryindex, entry) {       
				grassStr+= entry["name"] + ":手输面积" +  entry["area"] + "/亩，测量面积:" + entry["clArea"] + "/亩 <br>";
      		});			
		}
		if(typeof data.stockList!="undefined")
		{
	        $.each(data.stockList, function (entryindex, entry) {       
	        	stockStr+= entry["livestockTypeName"] +   entry["count"] + "/头";
	  		});	
		}
		var content = '<div style="margin:0;line-height:20px;padding:2px;">' + data["username"] + 
        '<img src="'+data["headImg"]+'" alt="" style="float:right;zoom:1;overflow:hidden;width:100px;height:100px;margin-left:3px;"/>' +
        '<br>草场:<br>' + grassStr +
        '牲畜:' + stockStr + 
      '</div>';
	    //创建检索信息窗口对象
	    var searchInfoWindow = null;
		searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, {
				title  : "信息窗口",      //标题
				width  : 290,             //宽度
				height : 105,              //高度
				panel  : "panel",         //检索结果面板
				enableAutoPan : true,     //自动平移
				searchTypes   :[

				]
			});
		searchInfoWindow.open(marker);
	}
	
	function attribute(id,lon,lat){
		editBelt(id,lon,lat)
	}
	function removeMaker(id)
	{
		var allOverlay = map.getOverlays();
		for (var i = 0; i < allOverlay.length -1; i++){
			if(allOverlay[i].Qa)
			{
				if(allOverlay[i].getLabel().getTitle() == allOverlay[i].getLabel().getTitle()){
					map.removeOverlay(allOverlay[i]);
					return false;
				} 		
			}
 

		}
		
	}
	function deletePoint(){
		var allOverlay = map.getOverlays();
		for (var i = 0; i < allOverlay.length -1; i++){
			alert(allOverlay[i].getLabel());
			if(allOverlay[i].getLabel().content == "我是id=1"){
				map.removeOverlay(allOverlay[i]);
				return false;
			}
		}
	}
</script>
